<template>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="供应商名称">
            <el-input v-model="formInline.supplierName" placeholder="请输入供应商名称" clearable />
        </el-form-item>
        <el-form-item label="业务联系人">
            <el-input v-model="formInline.businessContact" placeholder="请输入业务联系人" clearable />
        </el-form-item>
        <el-form-item label="供应料品">
            <el-select v-model="formInline.materialTypeName" placeholder="请选择" clearable style="width: 150px;">
                <el-option v-for="item in material" :key="item.materialTypeId" :label="item.materialTypeName"
                    :value="item.materialTypeId" />
            </el-select>
        </el-form-item>


        <el-form-item>
            <el-button type="primary" @click="GetSuppliers()">搜索</el-button>
        </el-form-item>


    </el-form>
    <el-button type="primary" :icon="List" @click="GetSuppliers1()">查询所有</el-button>
    <el-button type="primary" :icon="Plus" plain @click="dialogFormVisible = true">新增</el-button>
    <!-- <el-button type="primary" :icon="Download">导入</el-button>
    <el-button type="primary" :icon="Upload">导出</el-button> -->


    <el-empty description="暂无数据" v-show="suppliers.length == 0" />
    <el-table :data="suppliers" stripe style="width: 100%" v-show="suppliers.length != 0">
        <el-table-column prop="supplierId" label="序号" />
        <el-table-column prop="supplierName" label="供应商名称" />
        <el-table-column prop="supplierAbbreviation" label="简称" />
        <el-table-column prop="companyAddress" label="公司地址" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="businessContact" label="业务联系人" />
        <el-table-column prop="materialTypeName" label="供应料品" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-link type="success">查看</el-link> &nbsp;
                <el-link type="primary">修改</el-link>&nbsp;
                <el-link type="danger">删除</el-link>&nbsp;
            </template>
        </el-table-column>

    </el-table>

    <div>
        <tr>
            <td>
                <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50]" :background="true" layout="total, slot, prev, pager, next"
                    :total="formInline.totalCount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50]" :background="true" layout="slot, sizes, jumper"
                    :total="formInline.totalCount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </td>
        </tr>
    </div>


    <el-dialog v-model="dialogFormVisible" title="供应商" width="800">
        <el-form :model="form">
            <el-form-item label="供应商名称" :label-width="formLabelWidth">
                <el-input v-model="form.supplierName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="供应商别名" :label-width="formLabelWidth">
                <el-input v-model="form.supplierAlias" autocomplete="off" />
            </el-form-item>

            <el-form-item label="简称" style="margin-left: 60px;">
                <el-col :span="10">
                    <el-input v-model="form.supplierAbbreviation" autocomplete="off" style="width: 220px;" />
                </el-col>
                <el-col :span="2" class="text-center">
                    <span class="text-gray-500">省/市</span>
                </el-col>
                <el-col :span="8">
                    <el-cascader v-model="form.provinceCityId" :options="options" @change="handleChange" clearable />
                </el-col>
            </el-form-item>

            <el-form-item label="供应料品" :label-width="formLabelWidth">
                <el-select v-model="form.materialTypeName" @change="handleChangeCc" multiple placeholder="请选择物料"
                    style="width: 240px">
                    <el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>

            <el-form-item label="供应商分类" style="margin-left: 60px;">
                <el-col :span="10">
                    <el-select v-model="form.supplierType" placeholder="请选择" style="width: 220px;">
                        <el-option label="核心供应商" value="核心供应商" />
                        <el-option label="普通供应商" value="普通供应商" />
                    </el-select>
                </el-col>
                <el-col :span="3" class="text-center">
                    <span class="text-gray-500">供应商等级</span>
                </el-col>
                <el-col :span="8">
                    <el-select v-model="form.supplierLeave" placeholder="请选择" style="width: 220px;">
                        <el-option label="A级" value="A级" />
                        <el-option label="B级" value="B级" />
                        <el-option label="C级" value="C级" />
                    </el-select>
                </el-col>
            </el-form-item>

            <el-form-item label="公司地址" :label-width="formLabelWidth">
                <el-input v-model="form.companyAddress" autocomplete="off" />
            </el-form-item>

            <el-form-item label="邮编" style="margin-left: 60px;">
                <el-col :span="10">
                    <el-input v-model="form.postcode" autocomplete="off" style="width: 220px;" />
                </el-col>
                <el-col :span="2" class="text-center">
                    <span class="text-gray-500">电话</span>
                </el-col>
                <el-col :span="8">
                    <el-input v-model="form.phone" autocomplete="off" style="width: 220px;" />
                </el-col>
            </el-form-item>

            <el-form-item label="备注" style="margin-left: 60px;">
                <el-col :span="10">
                    <el-input v-model="form.remark" autocomplete="off" style="width: 220px;" />
                </el-col>
                <el-col :span="2" class="text-center">
                    <span class="text-gray-500">状态</span>
                </el-col>
                <el-col :span="8">
                    <el-radio-group v-model="form.sdate">
                        <el-radio :value="true">正常</el-radio>
                        <el-radio :value="false">停用</el-radio>
                    </el-radio-group>
                </el-col>
            </el-form-item>

            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="开票信息" name="first">
                    <el-form :model="form" label-width="auto" style="max-width: 600px">
                        <el-form-item label="开户行">
                            <el-input v-model="form.openingBank" />
                        </el-form-item>
                        <el-form-item label="地址电话">
                            <el-input v-model="form.addressPhone" />
                        </el-form-item>
                        <el-form-item label="账号">
                            <el-input v-model="form.accountNumber" />
                        </el-form-item>
                        <el-form-item label="税号">
                            <el-input v-model="form.dutyParagraph" />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="业务联系人" name="second">
                    <el-form :inline="true" :model="form" label-width="auto" style="max-width: 600px">
                        <el-form-item label="联系人">
                            <el-input v-model="form.businessContact" />
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input v-model="form.businessPhone" />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="财务联系人" name="third">
                    <el-form :inline="true" :model="form" label-width="auto" style="max-width: 600px">
                        <el-form-item label="联系人">
                            <el-input v-model="form.financialContact" />
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input v-model="form.financialPhone" />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>






        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="AddSupplier()">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>


</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from 'vue-router'
import axios from 'axios';
import { Plus, Download, Upload, List } from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'
const router = useRouter()
const route = useRoute()
const apiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationWrite;//5013
const cpiurls = import.meta.env.VITE_APP_API_URL_RBACCommon;//5214
const dpiurls = import.meta.env.VITE_APP_API_URL_RBACWrite;//5268
const epiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
const fpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementWrite;//5020

const activeName = ref('first')

onMounted(() => {
    getProvinceCityQuery()
    getMaterialTree()
    GetSuppliers()
    getMaterial()
});

const formInline = reactive({
    supplierName: '',
    businessContact: '',
    materialTypeName: '',
    pageIndex: 1,
    pageSize: 10,
    pageCount: 0,
    totalCount: 0,

})


const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
let provinceCityIds: any = []
//绑定省/市信息
const options: any = ref([]);
const handleChange = (val: any) => {
    console.log(val);
    provinceCityIds = val.toString();
    console.log(provinceCityIds);
    // var n = ""
    // n= provinceCityIds[0]+","+provinceCityIds[1]
    // console.log(n);
};
const getProvinceCityQuery = () => {
    axios
        .get(apiurls + '/api/CustomerProfileReades/ProvinceCityQuery')
        .then((res) => {
            console.log(res.data.data);
            options.value = res.data.data;
        })
        .catch((err) => {
            console.log(err);
        });
};
let materialTypeNames: any = []
const handleChangeCc = (val: any) => {
    console.log(val);
    materialTypeNames = val.toString();
    console.log(materialTypeNames);
}
//物料添加下拉多选
const optionss: any = ref([]);
const getMaterialTree = () => {
    axios
        .get(
            apiurls + '/api/Materials/GetmaterialTree')
        .then((res) => {
            console.log(res.data.data);
            optionss.value = res.data.data;
        })
        .catch((err) => {
            console.log(err);
        });
};
//物料下拉框
const material: any = ref([]);
const getMaterial = () => {
    axios
        .get(apiurls + '/api/Suppliers/MaterialList')
        .then((res) => {
            console.log(res.data.data);
            material.value = res.data.data;
        })
        .catch((err) => {
            console.log(err);
        });
};


//供应商列表
const suppliers: any = ref([]);
const GetSuppliers = () => {
    axios
        .get(
            apiurls + '/api/Suppliers/SuppliersList',
            {
                params: {
                    supplierName: formInline.supplierName,
                    businessContact: formInline.businessContact,
                    materialTypeName: formInline.materialTypeName || 0,
                    pageIndex: formInline.pageIndex,
                    pageSize: formInline.pageSize,
                }
            }
        )
        .then((res) => {
            console.log(res.data.data);
            suppliers.value = res.data.data;
            formInline.pageCount = res.data.pageCount;
            formInline.totalCount = res.data.totalCount;
        })
        .catch((err) => {
            console.log(err);
        });
};

const GetSuppliers1 = () => {
    axios
        .get(
            apiurls + '/api/Suppliers/SuppliersList',
            {
                params: {
                    supplierName: '',
                    businessContact: '',
                    materialTypeName: 0,
                    pageIndex: formInline.pageIndex,
                    pageSize: formInline.pageSize,
                }
            }
        )
        .then((res) => {
            console.log(res.data.data);
            suppliers.value = res.data.data;
            formInline.pageCount = res.data.pageCount;
            formInline.totalCount = res.data.totalCount;
        })
        .catch((err) => {
            console.log(err);
        });
};

//分页
const handleSizeChange = (val: number) => {
    formInline.pageSize = val
    GetSuppliers()
}
const handleCurrentChange = (val: number) => {
    formInline.pageIndex = val
    GetSuppliers()
}



const dialogFormVisible = ref(false)
const formLabelWidth = '140px'


const form = reactive({
    supplierName: '',
    supplierAlias: '',
    supplierAbbreviation: '',
    provinceCityId: '',
    materialTypeName: '',
    supplierType: '',
    supplierLeave: '',
    companyAddress: '',
    postcode: '',
    phone: '',
    remark: '',
    sdate: true,
    openingBank: '',
    addressPhone: '',
    accountNumber: '',
    dutyParagraph: '',
    businessContact: '',
    businessPhone: '',
    financialContact: '',
    financialPhone: '',
})
//添加供应商
const AddSupplier = () => {
    axios.post(bpiurls + '/api/Supplier/supplierCreate', {
        supplierName: form.supplierName,
        supplierAlias: form.supplierAlias,
        supplierAbbreviation: form.supplierAbbreviation,
        provinceCityId: provinceCityIds,
        materialTypeName: materialTypeNames,
        supplierType: form.supplierType,
        supplierLeave: form.supplierLeave,
        companyAddress: form.companyAddress,
        postcode: form.postcode,
        phone: form.phone,
        remark: form.remark,
        sdate: form.sdate,
        openingBank: form.openingBank,
        addressPhone: form.addressPhone,
        accountNumber: form.accountNumber,
        dutyParagraph: form.dutyParagraph,
        businessContact: form.businessContact,
        businessPhone: form.businessPhone,
        financialContact: form.financialContact,
        financialPhone: form.financialPhone,
    }).then((res) => {
        console.log(res.data.code);

        if (res.data.code == 0) {
            ElMessage.success("添加成功")
            // ElMessage({
            //     message: res.data.msg,
            //     type: 'success',
            // })
            dialogFormVisible.value = false
            GetSuppliers()
        } else {
            ElMessage.error("添加失败")
        }

    })





}




</script>

<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>